<template>
	<z-paging-swiper>
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<public-navbar :isBack="true">
				<view class="u-m-l-22">我的订单</view>
			</public-navbar>
			<!-- <view class="tab-bar">
				<view :class="['item-tab', { active: isActiveTab(index) }]"
				v-for="(item, index) in tabList" :key="item.value" @tap="changeTab(index)">
					{{ item.label }}
				</view>
			</view> -->
			<z-tabs ref="tabs" :list="tabList" :current="tabIndex" @change="changeTab" class="tab-bar"
				active-color="#FC7404"></z-tabs>
		</template>


		<swiper style="height: 100%;" :current="tabIndex" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="item-order" v-for="item in tabList" :key="item.filter">
				<user-order-list ref="childComponent" :filter="item.filter" :autoRefresh="item.filter=='all'"></user-order-list>
			</swiper-item>
		</swiper>
		<!-- <template #bottom>
			<public-tabbar></public-tabbar>
		</template> -->

		<public-fixed-box bottom>
			<public-tabbar></public-tabbar>
		</public-fixed-box>
	</z-paging-swiper>
</template>

<script>
	import { orderlist } from '@/components/user-order-list/user-order-list.vue';
	// import user-order-list from '@/components/user-order-list/user-order-list.vue'
	export default {
		name: "Order",
		data() {
			return {
				tabIndex: 0,
				dataList: [],
				tabList: [{
						name: '全部',
						filter: 'all'
					},
					{
						name: '定金待付',
						filter: 'deposit'
					},
					{
						name: '等待接单',
						filter: 'isnotb'
					},
					{
						name: '等待派单',
						filter: 'amount'
					},
					// {name: '等待派单', filter: 'isnotm'},
					{
						name: '等待上门',
						filter: 'service'
					},
					{
						name: '已完成',
						filter: 'completed'
					},
					{
						name: '维权',
						filter: 'maintanance'
					},
				]
			};
		},
		onLoad(options) {
			if (typeof options.selectedId == 'undefined') {
				this.tabIndex = 0;
			} else {
				this.tabIndex = options.selectedId;
			}
			console.log("selectedId", options.selectedId);
			// uni.$emit('refreshOrder', this.tabList[this.tabIndex].filter);
			//this.tabIndex = options.selectedId;
		},
		onShow() {
			console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!Should call refresh list.");
			setTimeout(() => {
				uni.$emit('refreshOrder', this.tabList[this.tabIndex].filter);
				
			},500)
		},
		onUnload() {
			// 卸载掉自动刷新列表事件
			// uni.$off('refreshOrder');
		},
		computed: {
			isActiveTab() {
				return (index) => index === this.tabIndex;
			},
			tabBarList() {
				return [];
			},
		},
		methods: {
			changeTab(index) {
				console.log(111111)
				this.tabIndex = index;
				uni.$emit('refreshOrder', this.tabList[this.tabIndex].filter);
			},
			// swiper滑动中
			swiperTransition(e) {
				// this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.tabIndex = e.detail.current;
				// this.$refs.tabs.unlockDx();
				// uni.$emit('refreshOrder', this.tabList[this.tabIndex].filter);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.tab-bar {
		padding: 0 0rpx;
		display: flex;
		justify-content: space-around;
		background-color: #fbfbfb;

		.item-tab {
			flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;

			&.active {
				color: #fb7601;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.item-order {
		margin: 0 0rpx;
		background-color: #FFF;
		border-radius: 8rpx;

		//   & + .item-order {
		//     margin-top: 22rpx;
		//   }
		.order-header {
			display: flex;
			height: 72rpx;
			line-height: 72rpx;
			flex-direction: row;

			.order-amount-title {
				font-size: 24rpx;
				color: #858585;
				font-weight: normal;
			}

			.order-amount {
				font-size: 32rpx;
				color: #000000;
				font-weight: bold;
				margin-left: 15rpx;
			}

			.order-status {
				display: flex;
				flex-direction: row;
				font-size: 24rpx;
				color: #ff764c;
				width: 750rpx;
				font-weight: bold;
				flex-grow: 1;

			}

			.order-status-text {
				font-size: 24rpx;
				color: #ff764c;
				font-weight: normal;
				margin-left: auto;
			}
		}

		.order-main {
			display: flex;
			flex-direction: column;

			.order-image {
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}

			.order-main-content {
				display: flex;
				flex-direction: row;
				margin-top: 20rpx;

				.order-main-content-item {
					flex: 1;
					flex-direction: column;
					margin-left: 25rpx;
				}

				.title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.contacts {
					display: flex;
					flex-direction: row;
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;
					line-height: 24rpx;
					align-items: baseline;

					.contacts-text-item {
						margin-right: 10rpx;
					}

					.contacts-medal {
						color: #fb7601;
						background-color: #ffefe2;
						padding: 10rpx;
						border-radius: 10rpx;
						margin-right: 40rpx;
					}
				}

				.extra-tips {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #ff764c;
				}

				.dot-green {
					width: 15rpx;
					height: 15rpx;
					background-color: #16d692;
					border-radius: 50%;
					color: #16d692;
					align-self: center;
				}

				.dot-black {
					width: 15rpx;
					height: 15rpx;
					background-color: #000;
					border-radius: 50%;
					color: #000;
					align-self: center;
				}
			}
		}

		.price-bar {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx 0;
			font-size: 24rpx;

			.label {
				margin-left: 20rpx;
			}

			.value {
				font-size: 26rpx;
				font-weight: bold;
			}
		}

		.button-group {
			margin: 10rpx 0;
			display: flex;
			justify-content: flex-end;
			margin-top: 30rpx;

			.item-btn {
				align-self: center;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0;
				padding: 0 20rpx;
				height: 56rpx;
				border: 1px solid #888;
				border-radius: 10rpx;
				color: #888;
				font-size: 26rpx;

				&+.item-btn {
					margin-left: 22rpx;
				}

				&.primary {
					color: #FFF;
					border: 1px solid #fb7601;
					background-color: #fb7601;
				}
			}
		}
	}
</style>